<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约详情</title>
  <!--引入elementui得样式-->
  <link type="text/css" rel="stylesheet" href="/css/index.css"/>
  <!--引入vue得依赖必须再elementui之前引入vue-->
  <script type="text/javascript" src="/js/vue.js"></script>
  <script type="text/javascript" src="/js/index.js"></script>
  <script type="text/javascript" src="/js/axios.min.js"></script>
  <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
  <div id="app">
    <!--展示表格数据-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
      <el-table-column
              prop="regId"
              label="编号"
              width="120">
      </el-table-column>
      <el-table-column
              prop="user.realname"
              label="用户姓名"
              width="120">
      </el-table-column>
      <el-table-column
              prop="section.sectionName"
              label="预约科室"
              width="120">
      </el-table-column>
      <el-table-column
              prop="admin.name"
              label="医生姓名"
              width="120">
      </el-table-column>
      <el-table-column
              prop="regDate"
              label="预约时间"
              width="150">
      </el-table-column>
      <el-table-column
              prop="regName"
              label="患者姓名"
              width="120">
      </el-table-column>
      <el-table-column
              prop="status"
              label="状态"
              width="120">
        <template slot-scope="scope">
          <h4><span v-if="scope.row.status == 9" style="color:red;">未处理</span></h4>
            <h4><span v-if="scope.row.status == 0" style="color: blue">已处理</span></h4>
            <h4><span v-if="scope.row.status == 1" style="color: gray">已拒绝</span></h4>
            <h4><span v-if="scope.row.status == 2" style="color: gray">患者已取消预约</span></h4>
        </template>
      </el-table-column>
      <el-table-column fixed="right"  label="操作" width="300px">
        <template slot-scope="scope">
          <el-button type="primary" @click="chuli(scope.row)" v-if="scope.row.status==9">处理</el-button>
          <el-button type="info"    @click="jujue(scope.row)" v-if="scope.row.status==9">拒绝</el-button>
          <el-button type="success" @click="xiugai(scope.row)" v-if="scope.row.status==0">修改</el-button>
          <el-button type="danger"  @click="shanchu(scope.row)" v-if="scope.row.status==1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <!--分页-->
      <div id="fenye">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5,10,15,20]"
                  :page-size="pageSize"
                  :total="total"
                  layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
      </div>
    <!--处理预约信息的弹出层-->
    <el-dialog
            title="病例详情"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose">
            <!--病例信息-->
            <el-descriptions class="margin-top"  :column="2" :size="size" border>
<!--              <template slot="extra">-->
<!--                <el-button type="primary" size="small">操作</el-button>-->
<!--              </template>-->
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  患者姓名
                </template>
                  {{regData.regName}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机号
                </template>
                {{regData.phonenumber}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-location-outline"></i>
                    预约科室
                </template>
                  {{regData.sectionName}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  性别
                </template>
                {{regData.sex}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-office-building"></i>
                  预约日期
                </template>
                {{regData.regDate}}
              </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        主治医师
                    </template>
                    {{regData.adminName}}
                </el-descriptions-item>
            </el-descriptions>
        <el-form :label-position="labelPosition" label-width="100%" :model="formLabelAlign">
            <el-form-item label="病情分析:">
                <el-input   type="textarea" :rows="1" v-model="formLabelAlign.cases"></el-input>
            </el-form-item>
            <el-form-item label="治疗意见:">
                <el-input type="textarea" :rows="3" v-model="formLabelAlign.suggest"></el-input>
            </el-form-item>
        </el-form>
    <el-button type="danger" style="width: 15%;margin-left: 350px" @click="dialogVisible = false">取 消</el-button>
    <el-button type="success" style=" width: 15%;margin-right: 230px" @click="querenchuli()">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</body>
<script>

    var app = new Vue({
        el:"#app",
        data:{
        tableData:[],
        dialogVisible:false,
        regData:{},
        labelPosition: 'top',
        formLabelAlign:{},
        //当前显示的页码
        currentPage:1,
        //总条数
        total:0,
        //每页显示的条数
        pageSize:5,
        },
        created(){
          this.showTable();
        },
        methods:{
            showTable(){
              axios.post("reg/selelctRegByAdminId?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{
                this.tableData=resp.data.data.list;
                  //把查询出来的总条数赋值给total
                  this.total=resp.data.data.total
              })
            },
          chuli(row){
              this.dialogVisible=true;
              this.formLabelAlign=row
              axios.post("reg/selectByRegId?regId="+row.regId).then(resp=>{
                  this.regData=resp.data.data;
                  console.log(this.regData);
              })
          },
            querenchuli(){
                this.formLabelAlign.status=0;
                axios.post("reg/updateRegByRegId",this.formLabelAlign).then(resp=>{
                this.$message.success("已处理完成");
                    this.showTable();
                    this.dialogVisible=false;
                })
            },
          jujue(row){
            row.status=1;
            axios.post("/reg/updateRegByRegId",row).then(resp=>{
              this.$message.success("已拒绝");
              this.showTable();
            })
          },
          xiugai(row){
              this.dialogVisible=true;
              this.formLabelAlign=row;
              this.regData=row;
          },
            // querenxiugai(){
            //     axios.post("reg/updateRegByRegId",this.formLabelAlign).then(resp=>{
            //         this.$message.success("已修改完成");
            //         this.showTable();
            //         this.dialogVisible=false;
            //     })
            // },
          shanchu(row){
              axios.post("reg/deleteByRegId?regId="+row.regId).then(resp=>{
                this.$message.success("删除成功")
                this.showTable();
              })
          },
            //点击处理页码大小变动时候触发的事件
            handleSizeChange(val) {
                //点击切换每页显示的条数时，把每页的显示条数的值重新赋值给pageSize
                this.pageSize=val;
                this.showTable();
            },
            //点击处理当前页变动时候触发的事件。
            handleCurrentChange(val) {
                //点击到第几页是，把当前是第几页的值重新赋值给currentPage
                this.currentPage=val;
                this.showTable();
            },
        }
    })
</script>
</html>